<template>
    <div class="app-container h-100">
        <el-form :model="queryParams" label-width="80px" :inline="true">
            <el-form-item label="文件名：">
                <el-input v-model="queryParams.filename" placeholder="请输入文件名称"></el-input>
            </el-form-item>
            <el-form-item label="文件类型">
                <el-select v-model="queryParams.filetype" placeholder="请选择文件类型">
                    <!-- <el-select v-model="addForm.filetype" placeholder="请选择报表类型"> -->
                        <el-option v-for="(item, key) in dict.type['sys_report_type']" :key="key" :label="item.label" :value="item.value" />
                    <!-- </el-select> -->
                    <!-- <el-option v-for="item in dict.type.sys_report_type":key="item.value" :label="item.label" :value="item.value" > </el-option> -->
                    <!-- <el-option v-for="item in dict.type.sys_report_type":key="item.value" :label="item.label" :value="item.value" > </el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="时间：">
                <el-date-picker
                    v-model="queryParams.dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <el-container style="height: calc(100% - 60px);">
             <el-aside width="400px" style="background: #FFFFFF;">
                <el-table ref="apitable" :data="tableData" highlight-current-row style="width: 100%" @current-change="tableRowClick">
                    <el-table-column width="30">
                        <template slot-scope="scope">
                            <el-radio v-model="viewIndex" :label="scope.row.id">单选</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                    <el-table-column prop="filename" label="文件名称" width="180"> </el-table-column>
                    <el-table-column prop="filetime" label="日期"> </el-table-column>
                </el-table>
             </el-aside>
             <el-main style="padding: 0px 20px 16px;">
                <iframe v-if="pdfUrl" style=" border: 0; width: 100%; height: calc(100% - 4px);" :src="'http://39.106.226.59:9520/prod-api'+this.pdfUrl"  frameborder="0"></iframe>
             </el-main>
        </el-container>
    </div>
</template>
<script>
import { getReportRelease} from './api/api.js';
export default {
    components:{ 
        // pefPreview
    },
    dicts:['sys_report_type',],
    computed:{
        tableData() {
            return this.apiList
        },
        listParams(){
            let filename = this.queryParams.filename;
            let beginTime = this.queryParams.dateRange[0];
            let endTime = this.queryParams.dateRange[1];
            let filetype = this.queryParams.filetype;
            return {filename,filetype,beginTime,endTime}
        },
        iframeUrl(){
            if(location.hostname = 'localhost'){
                console.log('/prod-api'+this.pdfUrl);
                return '/prod-api'+this.pdfUrl;
            }else{
                return 'http://39.106.226.59:9520/prod-api'+this.pdfUrl;
            }
        }
    },
    created() {
        let s = $moment().offset('day',-30).format('{y}-{m}-{d}');
        let e = $moment().format('{y}-{m}-{d}');
        this.queryParams.dateRange = [s,e]
        this.getList()
    },
    data() {
        return {
            queryParams: {
                filename: "",
                filetype:"",
                dateRange: "",
            },
            viewIndex:0,
            apiList:[],
            pdfUrl:'',
        }
    },
    methods:{
        handleQuery(){
            console.log("handleQuery",this.queryParams);
            
            this.getList()
        },
        async getList(){
            this.pdfUrl = '';
            this.apiList = [];
            let res = await getReportRelease(this.listParams)
            this.apiList = res.rows;
            // for(let i = 0;i<5;i++){
            //     let data = {...res.rows[0]};
            //     data.id = i;
            //     this.apiList.push(data)
            // }
            // this.apiList = [...res.rows,...res.rows,...res.rows]
            if(this.apiList.length>0){
                this.pdfUrl = this.apiList[0].filepath;
                this.viewIndex = this.apiList[0].id;
                this.$refs.apitable.setCurrentRow(this.apiList[0]);
            }
        },
        tableRowClick(e){
            this.pdfUrl = '';
            this.viewIndex = e.id;
            setTimeout(() => {
                this.pdfUrl = e.filepath;
            }, 1);
        }
    }
}
</script>